<template>
  <div class="notice-wapper">
    <div class="tool">
      <span class="del" style="margin-left: 10px;line-height: 26px;" v-if="isHaveMenu('operate_log_data_recovery')">{{$t('configLazyLoad.operateLogManage.logTip4')}}</span>
      <div class="pag-wapper" style="float: right">
        <pagination
          :small="true"
          :currentPage="currentPage"
          :count="count1"
          @turnPage="trunPages"
          :totalPage="Math.ceil(count/10)"
        >
        </pagination>
      </div>
    </div>
    <div class="table-wapper">
      <el-table
        :data="noticeList"
        size="mini"
        highlight-current-row
        stripe
        style="width: 100%">
        <el-table-column
          :label="$t('configLazyLoad.operateLogManage.excute')"
          >
          <template scope="scope">
            <agent
              :id="scope.row.agent"
              isNum >
            </agent>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('configLazyLoad.operateLogManage.excuteTime')"
          >
          <template scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('configLazyLoad.operateLogManage.excuteAction')">
          <template scope="scope">
            {{ scope.row.operateName}}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('configLazyLoad.operateLogManage.dataType')"
          show-overflow-tooltip>
          <template scope="scope"
            >
            {{ scope.row.typeName}}
          </template>
        </el-table-column>
          <el-table-column
            :label="$t('questionnaire.otherStatus')">
            <template scope="scope">
              {{ scope.row.other || '- -' }}
            </template>
          </el-table-column>
        <el-table-column
             v-if="isHaveMenu('operate_log_data_recovery')"
             :label="$t('public.operate')"
             width="200">
          <template scope="scope">
            <div v-show="scope.row.type === 'customer' || scope.row.type === 'business'">
              <div v-if="scope.row.regainStatus && scope.row.regainStatus === 'recovery'"><el-button type="primary" class="primary_btn" style="min-width: 74px" @click="handlRenew(scope.row)">{{$t('configLazyLoad.operateLogManage.recoverData')}}</el-button></div>
              <div v-if="scope.row.regainStatus && scope.row.regainStatus === 'noRecovery'">
                <el-tooltip class="item" effect="dark" :content="$t('configLazyLoad.operateLogManage.logTip4')" placement="bottom">
                  <span class="no-return">{{$t('configLazyLoad.operateLogManage.noRecover')}}</span>
                </el-tooltip>
              </div>
              <!--<div class="yellow-col">恢复中</div>-->
              <div class="del" v-if="scope.row.regainStatus && scope.row.regainStatus === 'recoveryFail'">
                <span style="margin-right: 8px">{{$t('configLazyLoad.operateLogManage.recoverFail')}}</span>
                <el-button type="primary" class="primary_btn" style="min-width: 74px" @click="handlRenew(scope.row)">{{$t('configLazyLoad.operateLogManage.reRecover')}}</el-button>
              </div>
              <div class="yellow-col" v-if="scope.row.regainStatus && scope.row.regainStatus === 'recovering'">{{$t('configLazyLoad.operateLogManage.recovering')}}</div>
              <div class="main-color" v-if="scope.row.regainStatus && scope.row.regainStatus === 'recoverySuccess'">
                <span v-if="scope.row.recoveryPerson === 'system'">{{$t('configLazyLoad.operateLogManage.superAdmin')}}</span>
                <agent
                v-if="scope.row.recoveryPerson !== 'system'"
                :id="scope.row.recoveryPerson"
                isNum ></agent>{{$t('configLazyLoad.operateLogManage.at')}}{{scope.row.recoveryTime}}
                {{$t('configLazyLoad.operateLogManage.recoverSucc1')}}
                </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import Agent from '@/components/public-modules/cache/Agent'
  import Pagination from '@/components/public-modules/card/Pagination'
  import { deepClone, isHasMenu } from '@/utils/m7Utils.js'
  export default {
    name: 'noticeTab',
    data () {
      return {
        currentPage: '',
        noticeList: [],
        count1: 0
      }
    },
    props: {
      tableData: Array,
      count: Number,
      currPage: Number
    },
    components: {
      Pagination,
      Agent
    },
    watch: {
      currPage () {
        this.currentPage = this.currPage
      },
      tableData () {
        this.count1 = this.count
        this.noticeList = deepClone(this.tableData)
      }
    },
    methods: {
      isHaveMenu (func) {
        return isHasMenu(func, this.$store.state.session.user)
      },
      handlRenew (row) {
        this.$emit('handlRenew', row)
      },
      trunPages (page) {
        this.$emit('trunPages', page)
      // },
      // handleDel (index, row) {
      //   this.$emit('del', row)
      }
    },
    beforeMount () {
      this.currentPage = this.currPage
      this.count1 = this.count
      this.noticeList = deepClone(this.tableData)
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .no-return
    display: inline-block;
    width: 72px;
    border: 1px solid #ccc;
    height: 28px;
    border-radius: 5px;
    line-height: 28px;
    font-size: 12px;
    text-align: center;
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #fff;
    border-color: #ebeef5;
  .yellow-col
    color $cf-color0
  .main-color
    color $c-main
  .del
    color: $c-pink !important
    margin-left 0px
  .wapper
    display flex
    flex-direction column
  .tool
    border 1px solid #e7e7eb
    border-bottom 0
    padding  8px 0px
    /*display flex*/
    justify-content space-between
  .el-icon-plus
    color $c-main
  .add-wapper
    line-height 28px
    cursor pointer
    span
      margin-left 5px
  .stop
    color $c-pink
  .notice-wapper
    padding-left 0px
    overflow-y hidden
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0px;
    padding-right: 10px;
    padding-left: 16px;
    /* height: calc(100vh - 95px); */
    overflow-y: auto;
    font-size: 12px;
</style>
